<script setup>
import FirstTitle from "@comp/FirstTitle";
const city = window.globalObj.name;

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataKqzy } from "@/api/search";
import { addOrUpdateKqzy } from "@/api/addOrUpdate";

const html = ref(`主要明确跨区支援行动的行动原则和具体要求。`);

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const toolbarConfig = {};
const toolbarConfig1 = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");

// 加载html
const initHtml = () => {
  searchDataKqzy({ m: "原则要求" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "行动原则")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "行动原则")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "<p>①统一指挥，协同作战。跨区域支援行动一般由上级人防指挥部统一协调，参加行动的专业队应发挥优势，密切协作，联合作战；②预有准备，快速反应。跨区域支援行动，应于平时制定预案、配置完善建设、定期演练，随时可以执行支援任务；③突出重点，以人为本。跨区域支援行动，要以防空袭救援协作区内重要目标遭受重、特大灾害救援为重点，坚持以人为本，科学施救，最大程度地抢救人员生命和减少灾害损失。</p>"
);
const valueHtml1 = ref(
  "<p>①建立前线指挥部，统筹安排跨区支援的各种行动，必要时派出先遣组提前进驻被支援地域，与被支援单位建立联系，了解掌握情况，以便更加有针对性的准备并确保参加支援任务的专业队准时安全到达指定位置；②研究调整补充跨区支援计划，在原有计划的基础上，针对具体任务进一步搞好分工，明确需要补充的装备器材等事项；③搞好宣传动员，采取必要手段，向参加跨区救援的人员通报情况，加强思想教育，鼓舞士气，确保思想统一、精神振奋，坚定完成任务的决心。妥善处理好抢险救援人员面临的困难，解除后顾之忧；④严密组织，快速反应，及时到位，确保安全、顺利完成支援任务。</p>"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateKqzy({
      m: "原则要求",
      data: [
        {
          k: "行动原则",
          v: valueHtml.value,
        },
        {
          k: "具体要求",
          v: valueHtml1.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  if (!editor) return;
  if (!editor1) return;
  editor.destroy();
  editor1.destroy();
});
</script>
<template>
  <div>
    <div class="box text-page">{{ html }}</div>

    <FirstTitle name="行动原则" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="具体要求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
